<template>
  <div class="workbench">
    <h1>南航碧桂园小区</h1>
    <ul class="showDatabox">

      <li class="li-item" v-for="(item, index ) in showDatabox" :key="index">
        <!-- 图标 -->
        <div class="icon" :style="{ backgroundColor: item.bgColor }"> <span :class="item.icon"></span></div>
        <!-- 数据内容 -->
        <div class="liItemText">
          <p>{{ item.title }}</p>
          <VueCountUp class="h2" :options="options" :start-value="0" :decimals="0" :end-value="item.numdata"
            :duration="1" />

        </div>
      </li>
    </ul>
    <div class="wrap">
      <!-- echarts  图表 -->
      <div class="echartsbox">
        <div id="echarts" style="width:755px;height:380px"></div>
      </div>
      <!-- 右侧整体盒子区域 -->
      <div class="wrap-right">

        <div class="right_nav  right-puild">

          <h3>便捷导航</h3>
          <ul class="ConvenientNavigation">
            <li class="ConNav-Item" v-for="(item, index)  in ConvenientNavigation" :key="index">
              {{ item }}
            </li>
            <div class="addbtnbox">
              <button class="Add" @click="addNAv">+&nbsp;添加</button>
            </div>
          </ul>
        </div>
        <div class="right_text right-puild">

          <h3>备忘录</h3>
          <a-textarea placeholder="请输入" rows="5" />
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="main">
      <h2>住户查询</h2>
      <!-- 查询盒子 -->
      <a-row type="flex" class="sheadbox" justify="space-between">
        <a-col :span="12">
          <span>精准查询</span>
          <!-- 选择器 -->

          <a-select label-in-value :default-value="{ key: '住户姓名' }" style="width: 150px ;margin-right: 10px;"
            @change="handleChange">
            <a-select-option value="name">
              住户姓名
            </a-select-option>
            <a-select-option value="phone">
              手机号码
            </a-select-option>
            <a-select-option value="certificate">
              证件号码
            </a-select-option>
          </a-select>


          <a-input style="width: 280px" placeholder="请输入" v-model="Search.value" />

        </a-col>
        <a-col :span="3" class="btnbox">

          <a-button type="primary" @click="theQuery">查询</a-button>
          <a-button @click="reset">重置</a-button>

        </a-col>
      </a-row>
      <TaberWorkbench :Fromdata="Workbenchform"></TaberWorkbench>
    </div>
  </div>
</template>

<script>
import VueCountUp from 'vue-countupjs'; //实现数字滚动
import * as echarts from 'echarts' //引入echarts
import TaberWorkbench from "./components/TaberWorkbench.vue" //导入表格
import { Workbench } from '@/config/api'

export default {
  name: "Workbench",

  data() {
    return {

      ConvenientNavigation: [
        "新建住户", "车位管理", "新建月卡", "新建保修", "访客记录", "账单管理",
      ],
      //数字滚动配置项
      options: {
        useEasing: true, // 缓动动画 easing
        useGrouping: false, // 1,000,000 vs 1000000
        separator: ',', // 数字分隔符
        decimal: '.', // 小数分隔符
        prefix: '', // 前缀
        suffix: '' // 后缀
      },
      Workbenchform: [],
      showDatabox: [],
      myChart: {},
      Search: {
        type: "name",
        value: ""
      }
    };
  },

  components: {
    VueCountUp,
    TaberWorkbench
  },
  //图标配置与数据
  mounted() {
    // 3、基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echarts"));
    // 4、指定图表的配置项和数据
    var option = {
      title: {
        text: "近一周保修量趋势",
      },
      tooltip: {
      },
      legend: {

      },
      xAxis: {
        data: ["04-01", "04-02", "04-03", "04-04", "04-05", "04-06", "04-07"],
      },
      yAxis: {
        type: "value",
        splitLine: {
          lineStyle: {
            type: "dashed",
            width: 1
          },
          show: true
        }
      },
      series: [
        {

          type: "line",
          // showSymbol: false,
          symbolSize: 8,
          data: [110, 480, 450, 295, 420, 420, 270],
          // data: [
          //   {
          //     name: "04-04",
          //     value: 295
          //   }


          // ],
          symbol: "circle",

          itemStyle: {
            emphasis: {
              color: '#5B8FF9',
              borderColor: '#5B8FF9',
              borderWidth: 5,

            }
          },
          //设置面积区域为渐变效果
          areaStyle: {
            normal: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.1,
                  color: "#F9FBFF",
                },
                {
                  offset: 1,
                  color: 'rgba(91, 143, 249, 0.3)',

                },
              ])
            }
          },
        }
      ],
      lineStyle: {
        width: 3,
        color: "#5B8FF9",
      },
      grid: {
        top: '60px',
        left: "40px",
        bottom: "40px",
        right: "-10px"
      }

    };
    // 5、使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    this.WorkbenchData()

  },

  methods: {
    addNAv() {

    },
    //等待数据的渲染
    async WorkbenchData() {
      const { data: res } = await Workbench()
      const { showDatabox, Workbenchform } = res.data
      this.showDatabox = showDatabox
      this.Workbenchform = Workbenchform;
      window.sessionStorage.setItem("Workbenchform", JSON.stringify(Workbenchform))

      if (this.Workbenchform == "") {

      }
    },
    //切换查询时获取到key值
    handleChange(value) {
      // this.$set(this.SearchTypes, value.key, "");

      this.Search.type = value.key
      //重新进行渲染并让value为空
      // this.WorkbenchData()
      // this.Search.value = "";
    },

    // 点击按钮比较Workbenchform数据 并返回
    theQuery() {
      let A = this.Workbenchform.filter(item => {
        return item[this.Search.type].indexOf(this.Search.value) != -1

      })
      this.Workbenchform = A
    },
    reset() {
      this.Search.value = "";
      this.Workbenchform = JSON.parse(window.sessionStorage.getItem("Workbenchform"))


    }
  }
};
</script>

<style lang="less" scoped>
.workbench {
  width: 100%;
  // height: 100vh;

  h1 {
    font-size: 20px;
    font-weight: 600;
  }


  .showDatabox {
    width: 100%;
    height: 100px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;

    .li-item {
      background-color: #fff;
      height: 100%;
      width: 270px;
      display: flex;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;

      .icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 10px;
        text-align: center;
        line-height: 60px;
        color: #fff;
        // font-weight: 600;

        .iconfont {
          font-size: 26px;
        }

      }

      .liItemText {
        height: 100%;
        line-height: 35px;

        p {
          font-size: 13px;
          color: #999;
        }

        .h2 {
          font-size: 28px;
          font-weight: 700;
        }
      }
    }
  }

  .wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .main {
    margin-top: 20px;
    background-color: #fff;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  // background-color: #fff;
}

.wrap {
  .echartsbox {
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-right: 15px;

  }

  #echarts {}

  .wrap-right {
    width: 340px;

    .right_nav {
      margin-bottom: 20px;
    }



    .right-puild {
      background-color: #fff;
      height: 170px;
      padding: 20px;
      box-sizing: border-box;

      h3 {
        font-size: 16px;
        margin-bottom: 20px;
      }

      .ConvenientNavigation {
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        justify-content: flex-start;
        align-items: center;

        .Add {
          padding: 0 15px 0 10px;
          box-sizing: border-box;
          background-color: transparent;
          height: 26px;
          border: 1px solid #189EFF;
          line-height: 26px;
          text-align: center;
          color: #189EFF;
          font-size: 14px;
        }


        .ConNav-Item,
        .addbtnbox {
          font-size: 14px;
          // margin: 0 20px 20px 0;
          height: 41px;
          width: 75px;
          line-height: 41px;
          text-align: left;
        }

        .ConNav-Item:hover {
          color: #189EFF;
        }

        .ConNav-Item:nth-child(4n) {
          margin-right: 0;
        }
      }
    }

    .right_text {
      height: 210px;

      textarea {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        font-size: 14px;
        resize: none;
        // text-indent: 5px;
        // cursor: none;
        outline: none;
        border-color: #E9E9E9;
      }


    }
  }

}

.main {
  h2 {
    font-size: 16px;
  }

  .sheadbox {
    margin: 30px 0;

    span {
      font-size: 14px;
      margin-right: 10px;
    }
  }

  .btnbox {
    display: flex;
    justify-content: space-between;
  }
}
</style>